<script lang="ts" setup>
import http from '@/http';
import { Delete, CirclePlus } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ElTree } from 'element-plus'

//角色名的搜索框的值
const mname = ref('')

//表格元素的引用
const multipleTableRef = ref<TableInstance>()
//表格中选中的角色
const multipleSelection = ref([])

//全选/全不选切换
const toggleSelection = (rows, ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

//复选框发生改变
const handleSelectionChange = (val) => {
  console.log(val)
  multipleSelection.value = val
}

//表格角色的数据
const tableData = ref([])
//子菜单
const submenu = ref([])
//挂载完成，获取当前页相关的角色数据
onMounted(() => {
  //调用获取当前页相关角色数据的方法
  getPage()
})

//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(10)
//总条数
let total = ref(0)
//获取当前页相关角色数据的方法
function getPage() {
  //参数：当前页号 , 每页条数 , 搜索角色名
  http.get('/menu/getPageMenu', {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      mname: mname.value
    }
  }).then((res) => {
    console.log(res)
    tableData.value = res.list
    submenu.value = res.list
    total.value = res.total
  })
}


//树状菜单


const handleNodeClick = (data) => {
  console.log(data)
}

const data = [
  {
    label: tableData,
    children: [
      {
        label: submenu
      }
    ]
  }
]


const defaultProps = {
  children: 'children',
  label: 'label',
}


//修改用户按钮,进行编辑用户
const handleEdit = (index: number, row) => {
  console.log(index, row)
}

//删除用户按钮,进行用户删除
const handleDelete = (index: number, row) => {
  console.log(index, row)
}



//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  getPage()
}
//搜索框发生改变
function selectMenu() {
  getPage()
}
</script>
<template>
  <!-- 按钮+搜索 -->
  <el-row>
    <el-col :span="18">
      <el-button type="primary" :icon="CirclePlus">添加菜单</el-button>
    </el-col>
    <el-col :span="6">
      <el-input v-model="mname" @change="selectMenu" style="width: 240px" placeholder="请输入菜单名" clearable />
    </el-col>
  </el-row>

  <!-- 角色表格 -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <!-- 普通列 -->
    <el-table-column label="菜单名称" property="menuName"></el-table-column>
    <el-table-column property="menuType" label="菜单类型" />
    <el-table-column property="path" label="组件路径" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">正常</span>
        <span v-else>禁用</span>
      </template>
    </el-table-column>
    <el-table-column property="remark" label="备注" />
    <el-table-column property="createTime" label="创建时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>
</template>
<style scoped></style>
